<template>
  <div class="app-container">
    <el-row :span="24">
      <el-form :inline="true">
        <el-form-item>
          <el-input
            v-model="dataList.searchForm.LoginName"
            auto-complete="off"
            placeholder="用户名"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="findList"
          >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="loadForm()"
          >添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      v-loading="dataList.listLoading"
      :data="dataList.list"
      element-loading-text="Loading"
      border
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">{{ scope.row.UserName }}</template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">{{ scope.row.Phone }}</template>
      </el-table-column>

      <el-table-column label="是否禁用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.IsDisable"
            :active-value="true"
            :inactive-value="false"
            @change="save(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">

          <el-button type="primary" @click="loadForm(scope.row.ID)">编辑</el-button>
          <el-button type="primary" @click="restPwdFrom(scope.row.ID)">重置密码</el-button>
          <el-button type="danger" @click="remove(scope.row.ID)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="dataList.searchForm.pageIndex"
      :page-count="dataList.searchForm.pageCount"
      :hide-on-single-page="true"
      @current-change="currentPageChange"
    />

    <el-dialog
      title="编辑用户信息"
      :visible.sync="form.formState"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-position="left" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="用户名">
              <el-input
                v-model="form.model.UserName"
                placeholder="请输入用户名"
                required
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="登录名">
              <el-input
                v-model="form.model.LoginName"
                placeholder="请输入登录名"
                required
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="密码">
              <el-input
                v-model="form.model.Password"
                placeholder="请输入密码"
                required
                type="password"
                :readonly="(!(form.model.ID==0))"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="手机号">
              <el-input
                v-model="form.model.Phone"
                placeholder="请输入手机号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="用户头像">
              <el-upload
                :action="$store.state.settings.imageUploadUrl"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handleSuccess"
                :data="{ parameter: 'HeaderImage' }"
              >
                <img
                  v-if="form.model.HeaderImage"
                  :src="form.model.HeaderImage"
                  class="image"
                >
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9" :offset="1">
            <el-form-item label="性别">
              <el-select v-model.number="form.model.Sex">
                <el-option :value="0" label="未知" />
                <el-option :value="1" label="男" />
                <el-option :value="2" label="女" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="9" :offset="1">
            <el-form-item label="是否管理员">
              <el-switch
                v-model="form.model.IsAdmin"
                :active-value="1"
                :inactive-value="0"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9" :offset="1">
            <el-form-item label="是否禁用">
              <el-switch
                v-model="form.model.IsDisable"
                :active-value="true"
                :inactive-value="false"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
          </el-col>
        </el-row></el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save(form.model)">保 存</el-button>
        <el-button @click="form.formState = false"> 取 消 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="选择部门"
      :visible.sync="form.formDepartmentState"
      :close-on-click-modal="false"
    >
      <el-form :model="dataList" label-position="left" label-width="auto">
        <el-row>
          <el-col :span="9">
            <el-tree
              :data="dataList.departmentTree"
              :props="dataList.defaultProps"
              accordion
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form.formDepartmentState = false"> 取 消 </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="重置密码"
      :visible.sync="form.ResetPwdFormState"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-position="left" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="新密码">
              <el-input
                v-model="form.ResetPwdModel.Password"
                placeholder="请输入新密码"
                type="password"
                required
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <el-form-item label="确认密码">
              <el-input
                v-model="form.ResetPwdModel.NewPassword"
                placeholder="请输入密码"
                type="password"
                required
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetPassword()">保 存</el-button>
        <el-button @click="form.ResetPwdFormState = false"> 取 消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
const _controllerName = 'systemUserInfo'
const _vuexNamespace = 'system/userinfo'

export default {
  name: _controllerName,
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {
    // add
  },
  data() {
    return {
      listLoading: true
    }
  },
  computed: {
    ...mapState(_vuexNamespace, {
      dataList: state => state.dataList,
      form: state => state.form
    })
  },
  created() {
    this.findList()
    // this.loadTree()
  },
  methods: {
    // 获取数据
    ...mapActions(_vuexNamespace, {
      loadNewForm: 'loadNewForm',
      // 查询列表
      findList: 'findList',
      // 加载表单
      loadForm: 'loadForm',
      // 保存表单数据
      save: 'save',
      // 移除数据
      remove: 'delete',
      // loadTree: 'loadTree',
      handleSuccess: 'handleSuccess',
      handleNodeClick: 'handleNodeClick',
      checkedDepartment: 'checkedDepartment',

      restPwdFrom: 'restPwdFrom',
      resetPassword: 'resetPassword'
    }),
    // 状态管理事件
    ...mapMutations(_vuexNamespace, {
      // 勾选复选框改变事件
      selectionChange: 'selectionChange',
      // 重置检索文本框
      resetSearch: 'resetSearch',
      // 分页下拉框行数改变
      sizeChange: 'sizeChange',

      // 翻页
      currentPageChange: 'currentPageChange'

    })
  }
}
</script>
<style scoped>
.image {
  width: 148px;
  height: 148px;
}
</style>
